<template>
	<view>

		<uni-nav-bar dark :fixed="true" shadow background-color="red" status-bar left-icon="left" left-text="返回"
			title="卡券核销" @clickLeft="goBack"></uni-nav-bar>
		<view class="main">
			<view class="li">
				<view class="caozuogroupall">
					<view :class="[selTab==1 ? 'caozuogroupselect' : 'caozuogroup']" @tap="cj(1)">现金券抽奖</view>
					<view :class="[selTab==4 ? 'caozuogroupselect' : 'caozuogroup']" @tap="cj(4)">折扣券抽奖</view>
					<view :class="[selTab==3 ? 'caozuogroupselect' : 'caozuogroup']" @tap="cj(3)">商品券抽奖</view>
				</view>
			</view>
			<view class="li">

				<view class="label">
					核销码
				</view>
				<view class="bor">
					<input placeholder="请输入核销码" v-model="form.CouponCode" />
				</view>
			</view>

			<view class="apple" @tap="ok">
				核销
			</view>

		</view>
		<tuiFoot></tuiFoot>

	</view>
</template>

<script>
	import tuiFoot from '@/components/red/foot.vue'
	import {
		index,
	} from "@/api/classification";
	import {
		CancelUserCoupon
	} from "@/api/promotion";
	import {

		add,
		examine_find
	} from "@/api/examine";



	export default {
		components: {
			tuiFoot
		},
		data() {
			return {
				selTab: 1,
				array: [

				],
				classList: [

				],
				index: 0,
				form: {
					OpenId: this.$store.state.user.openid,
					LuckyDrawCouponType: 0,
					CouponCode: ''
				},
				uptype: -1
			}
		},
		async onLoad() {
			await this.selectIndex()
			this.find()

		},
		methods: {
			goBack() {
				uni.navigateBack({
					delta: 1 // 返回上一页面
				});
			},
			cj(i) {
				this.form.LuckyDrawCouponType = i;
				this.selTab = i
			},
			selectIndex() {

				return new Promise((resolve) => {
					index({})
						.then(res => {
							Object.keys(res.data.list).map(item => {
								this.array.push(res.data.list[item].name)
							})
							this.classList = res.data.list
							resolve();
						})
						.catch(res => {});
				});
			},
			find() {
				examine_find({})
					.then(res => {
						let form = res.data
						this.form = form
						this.index = this.classList.findIndex(fruit => fruit.id === res.data.classification_id);
					})
					.catch(res => {});
			},
			ok() {
				if (this.form.CouponCode == '') {
					return uni.showToast({
						title: '请输入核销码',
						icon: 'error',
					});
				}
				// this.form.classification_id = this.classList[this.index].id
debugger;
				CancelUserCoupon(this.form)
					.then(res => {
						debugger;
						return uni.showToast({
							title: res.msg
						});


					})
					.catch(res => {});

				// add(this.form)
				// 	.then(res => {
				// 		return uni.showToast({
				// 			title: res.data.msg
				// 		});
				// 	})
				// 	.catch(res => {

				// 	});

			},


			uploadpic: function(key) {
				let that = this;
				that.$util.uploadImageOne('upload/image', (res) => {

					that.$set(this.form, key, res.data.url);
				});

			}

		}
	}
</script>

<style>
	.caozuogroupall {
		width: 100%;
		display: flex;
		margin-bottom: 15rpx;
		/* 	margin: auto; */
	}

	.caozuogroup {
		background-color: #FC0000;
		color: #FFFFFF;
		padding: 3%;
		border-radius: 15rpx;
		width: 33%;
		margin-right: 2%;
		text-align: center;
	}

	.caozuogroupselect {
		background-color: royalblue;
		color: #FFFFFF;
		padding: 3%;
		border-radius: 15rpx;
		width: 33%;
		margin-right: 2%;
		text-align: center;

	}

	.san {
		width: 20upx;
		height: 30upx;
		position: absolute;
		left: 0;
	}

	.top {
		display: flex;

		width: 95%;
		margin: 0 auto;
		margin-top: 10%;
		position: relative;
		justify-content: center;
		align-items: center;
	}

	.title {
		text-align: center;
	}

	.main {
		width: 95%;
		margin: 0 auto;
		border: 1px solid #A5A5A5;
		margin-top: 5%;
		padding: 3%;
		border-radius: 15upx;
	}

	.li {
		display: flex;
		justify-content: space-between;
		margin-top: 2.5%;
		margin-bottom: 2.5%;
	}

	.bor {
		border: 1px solid #A5A5A5;
		border-radius: 15upx;
		width: 73%;
		padding-left: 3%;
		display: flex;
		align-items: center;
		padding-top: 1%;
		padding-bottom: 1%;

	}

	.hang {
		flex-direction: column;
	}

	.label {
		width: 25%;
		text-align: center;
		margin: auto 0rpx;
	}

	.apple {
		background-color: #FC0000;
		color: #fff;
		width: 250upx;
		margin: 0 auto;
		height: 70upx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 35upx;
		margin-top: 8%;
	}

	.he {
		width: 450upx;
		height: 90upx;
		background-color: #FC0000;
		color: #fff;
		margin: 0 auto;
		margin-top: 15%;
		border-radius: 45upx;
		display: flex;
		align-items: center;
		justify-content: center;

	}

	.bg {
		position: fixed;
		width: 100%;
		height: 100%;
		background-color: #000;
		z-index: 0;
		opacity: 0.5;
		left: 0;
		top: 0;

	}

	.caozuo {
		position: fixed;

		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 99;
		background-color: #fff;
		z-index: 9;
		width: 90%;
		border-radius: 20upx;
		display: flex;
		padding: 3.5%;
	}

	.an {
		width: 33.33%;
		background-color: #FC0000;
		color: #FFFFFF;
		margin-right: 2.5%;
		margin-left: 2.5%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		border-radius: 10upx;
		padding: 3%;
	}

	.ok {
		width: 450upx;
		height: 90upx;
		background-color: #FC0000;
		color: #fff;
		margin: 0 auto;
		margin-top: 10%;
		border-radius: 45upx;
		display: flex;
		align-items: center;
		justify-content: center;

	}

	.xiao {
		display: block;
	}

	.hexiaom {
		border: 1px solid #A5A5A5;
		height: 80upx;
		border-radius: 20upx;
		margin-top: 10%;
	}

	.img {
		border: 1px solid #A5A5A5;
		width: 100upx;

		border-radius: 10upx;
	}

	.ww {
		margin-left: 8%;
		font-size: 20upx;
		width: 150upx;
	}

	.image {
		width: 80upx;
		height: 80upx;
	}

	.certificate {
		margin-left: 3%;
		border: 1px solid #A5A5A5;
		border-radius: 10upx;
		margin-right: 3%;
	}

	.tuwen {
		width: 150upx;
		height: 150upx;
	}
</style>